
import { computed, defineComponent, onMounted, ref, watch } from "vue"
import classes from "./index.module.scss"
import { ElMenu, ElMenuItem, ElIcon } from "element-plus"
import { Bell, HomeFilled, UserFilled } from "@element-plus/icons-vue"
import router from "@/router"
import { useRoute, useRouter } from "vue-router"

export default defineComponent({
  setup(props, ctx) {
    const menus = [
      { index: "home", title: "首页", icon: <HomeFilled /> },
      { index: "message", title: "消息中心", icon: <Bell /> },
      { index: "personal", title: "个人中心", icon: <UserFilled /> }
    ]
    
    const current = useRoute()
    const activeIndex = computed(() => current.name as string)

    /**
     * @use 选择菜单
     */
    const onSelect = (name: string) => {
      router.push({name})
    }

    return () => (
      <header class={classes.header}>
        <ElMenu class={classes.menu}  mode="horizontal" onSelect={onSelect} defaultActive={activeIndex.value}>
          {
            menus.map(m => (
              <ElMenuItem key={m.index} index={m.index}>
                <ElIcon>{m.icon}</ElIcon>
                <span>{ m.title }</span>
              </ElMenuItem>
            ))
          }
        </ElMenu>
        <div class={classes.user}>
          
        </div>
      </header>
    )
  }
})